<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<script>
    var cas = document.querySelector("canvas");
    var ctx = cas.getContext("2d");
    //设置坐标系位移到canvas标签的中心
    //可以认为是一个细细的长长矩形在旋转，旋转到一定角度后变颜色
    ctx.translate(300,300);
    //因为每100毫秒就转一弧度，可以使用一个变量存弧度，每100毫秒加1
    var totalDeg=0;
   var timer= setInterval(function(){
        totalDeg+=1
        ctx.strokeRect(0,0,200,1)
        ctx.rotate(degToArc(1))

        if(totalDeg<360){
            ctx.strokeStyle="red"
        }
        if(totalDeg>120){
            ctx.strokeStyle="yellow"
        }
        if(totalDeg>270){
            ctx.strokeStyle="blue"
        }

        if(totalDeg==360){
            clearInterval(timer)
        }


    },50)


    function degToArc(num){
        return Math.PI/180*num;
    }


</script>
</body>
</html>